<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="title_box">
        <div style="font-size: 20px;font-weight: 700;line-height: 50px;width: 80%;">票据列表</div>
        <div class="btn_box">
            <button class="add">新增</button>
            <button class="remove">删除</button>
         
        </div>
        <p>  金额单位：元</p>
    </div>
    <table>
        <tr >
            <th>
                <input type="checkbox" name="test" id="test" >  
            </th>
            <th>序号</th>
            <th>类型</th>
            <th>税前金额</th>
            <th>税额</th>
            <th>价税合计</th>
            <th>日期</th>
            <th>备注</th>
        </tr>
    </table>
    <table class="tablist">
        
    </table>
</body>
<script src="./table.js"></script>
<script>
   
</script>
<style>
  table{
    width: 90%;
    margin: 0 auto;
  }
  tr{
    width: 100%;
    height: 50px;
    background-color: wheat;
    text-align: center;
  }
  .title_box{
    width: 90%;
    height: 50px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .title_box .btn_box{
    line-height: 50px;
    
  }
  .title_box .btn_box button{
    width: 65px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid  gainsboro;
    background-color: white;
  }
  .title_box .btn_box button:hover{
    background-color: gold;
    color: white;
  }
  td{
    width: 100px;
    text-align: center;
  }
  td input{
    border: none;
    /* outline:none; */
    background-color: wheat;
    text-align: center;
  }
</style>
</html>